<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <li><a href="http://qq.com">QQ</a></li>
    <li><a href="http://qq.com">Baidu</a></li>
  </div>
  <div class="box">
    <div class="box2"></div>
  </div>

</body>
<script>
  const lis = document.getElementsByTagName('li')
  console.log(lis);
  for (let i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function (e) {
      console.log(i);
      e.preventDefault()
    })
  }
  function dragBox(cls) {
    this.el = document.querySelector(cls)
    this.dragStart = function () {
      this.el.onmousedown = evt => {
        let e = evt || window.evt
        let disX = e.pageX - this.el.offsetLeft
        let disY = e.pageY - this.el.offsetTop
        this.dragIng(disX, disY)
        this.dragEnd()
      }
    }
    this.dragIng = function (x, y) {
      this.el.onmousemove = function (evt) {
        let e = evt || window.evt
        this.style.left = e.pageX - x + 'px'
        this.style.top = e.pageY - y + 'px'
      }
    }
    this.dragEnd = function () {
      this.el.onmouseup = function () {
        this.onmousemove = null
      }
    }
  }
  const box1 = new dragBox('.box')
  box1.dragStart()
  document.querySelector('.box').onmouseenter = function () {
    console.log(1);
  }
  //  解构赋值交换
  var a = [1, 2, 3, 6];
  [a[0], a[2]] = [a[2], a[0]];
  console.log(a); //[3,2,1];
  //  冒泡排序
  const arr = [1, 5, 50, 10, 8, 4]
  function bubbleSort(arr) {
    for (let i = 0; i < arr.length; i++) {
      for (let j = 0; j < arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
        }
      }
    }
    return arr
  }
  console.log(bubbleSort(arr));
  //  浅拷贝
  let copya = [1, 2, 3]
  let copyb = copya
  console.log(copyb, 'copyb');
  copya[1] = 5
  console.log(copyb, 'copyb2');
  // splice
  var splice1 = [11, 2, 3, 4, 5, 7];
  // console.log(splice.splice(2));  //3,4,5,7
  // console.log(splice);
  // console.log(splice1.splice(1, 2));
  // console.log(splice1);
  console.log(splice1.splice(1, 1, 'x'));
  console.log(splice1);
  //  slice
  var slice1 = [5, 4, 2, 1, 8, 7];
  console.log(slice1.slice(2, 4));  //2,1
  console.log(slice1);
  //  concat
  var concat1 = [1, 2, 3]
  var concat2 = [4, 5]
  var concat3 = concat1.concat(concat2)
  console.log(concat3, 'concat');
  new Promise(function (resolve) {
    console.log(222);
  })
  console.log(333);

  // 快速排序
  function quickSort(arr) {
    if (arr.length <= 1) {
      return arr
    }
    let mid = Math.floor(arr.length / 2)
    let middle = arr.splice(mid, 1)[0]
    let left = []
    let right = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] < middle) {
        left.push(arr[i])
      } else {
        right.push(arr[i])
      }
    }
    return quickSort(left).concat([middle], quickSort(right))
  }
  const quickarr = [85, 24, 63, 45, 17, 31, 96, 50]
  console.log(quickSort(quickarr));

</script>

</html>
<style>
  .box {
    width: 200px;
    height: 200px;
    position: absolute;
    background: yellow;
    z-index: 5;
  }

  .box2 {
    width: 300px;
    height: 100px;
    background: pink;
    position: absolute;
    z-index: -1;
  }
</style>